<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>

		<style type="text/css">
			.router-link-active {
				color: darkorange;
				font-weight: bold;
				text-decoration: none;
			}
			.myactive {
				color: cornflowerblue;
				font-weight: bold;
				text-decoration: none;
			}
			/* 动画入场前、离场前的状态 */
			.myrouter-enter,.myrouter-leave-to{
				opacity: 0;
				transform: translateY(200px);
			}
			/* 动画入场结束、离场后的状态 */
			.myrouter-enter-active,.myrouter-leave-active{
				transition: all 1s ease;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- a标签请求路径前需带 "#" 号才能访问到 -->
			<a href="#/login">登陆</a>
			<a href="#/register">注册</a>
			<hr>
			<!--
			1、想不带#号访问，可以使用router-link标签
			2、router-link会默认渲染为a标签，若不想渲染为a标签，可设置tag属性渲染为其他标签
			router-link不管被渲染成什么标签，都具有页面跳转的效果。
			-->
			<router-link to="/login" tag="span">登陆</router-link>
			<router-link to="/register">注册</router-link>
			<!-- 在主app中使用router-view展示路由组件 -->
			<transition name="myrouter" mode="out-in">
				<router-view></router-view>
			</transition>
		</div>
		<template id="login">
			<h1>登陆组件</h1>
		</template>
		<template id="register">
			<h1>注册组件</h1>
		</template>
		<script>
			// 注册组件
			var loginCom = {
				template: "#login"
			}
			var registerCom = {
				template: "#register"
			}

			/*
			定义路由
			1、每个路由映射一个组件
			 */
			var routes = [
					// 使用redirect设置重定向
					{path: "/", redirect: "/login"},
					{path: "/login", component: loginCom},
					{path: "/register", component: registerCom}
			]
			// 创建vue-router实例，传入路由配置
			var router = new VueRouter({
				routes,
				// 自定义选中样式
				linkActiveClass: "myactive"
			})

			var vue = new Vue({
				el:'#app',
				data:{

				},
				methods:{

				},
				components:{

				},
				// 将vue-router规则对象注册到vm实例上，用来监听url地址变化从而展示对应的组件
				router:router
			})
		</script>
	</body>
</html>
